<template>
  <router-link :to="`/list/${id}`">
    <div class='toContextMenu' @contextmenu.prevent="handleRight" @mouseover="hover" @mouseout="loser"></div>
    <el-menu-item index='index'>
        <svg v-if="icon === 'list'" class="icon" aria-hidden="true">
            <use xlink:href="#icon-list"></use>
        </svg>
        <svg v-else-if="icon === 'todo'" class="icon" aria-hidden="true">
            <use xlink:href="#icon-home"></use>
        </svg>
        <span class="myicon" v-else>{{icon}}</span>
        <span slot="title">{{title}}</span>
    </el-menu-item>
  </router-link>
</template>

<script>
export default {
  name: "check",
  props: ['title', 'id', 'icon', 'index'],
  methods: {
    handleRight (e) {

      //获取我们自定义的右键菜单
      var menu = document.querySelector("#menu");

      //根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = e.clientX + "px";
      menu.style.top = e.clientY + "px";

      //改变自定义菜单的宽，让它显示出来
      menu.style.display = 'block'
    },
    hover (e) {
      e.target.nextElementSibling.style.background = '#ecf5ff'
    },
    loser (e) {
      e.target.nextElementSibling.style.background = ''
    }
  }
};
</script>

<style scoped lang="less">
.myicon {
  display: inline-block;
  font-size: 25px;
  margin-right: 5px;
}

.toContextMenu {
  position: absolute;
  z-index: 999;
  width: 100%;
  height: 56px;
  
  // &:hover {
  //   background-color: #ecf5ff;
  // }
}

</style>
